<template>
  <div>
    <div class="search">
      <el-form label-width="80px"
               style="display: flex;">
        <el-form-item label="商品名称">
          <el-input v-model="queryFrom.name"
                    class="ipt"></el-input>
        </el-form-item>
        <el-button type="primary"
                   style="height: 40px;margin-left: 15px;"
                   @click="queryCustomerBill()">查询</el-button>
      </el-form>

    </div>
    <listVue :customerBills="customerBills"></listVue>
    <dialogInfoVue ref="dialogInfoVue"></dialogInfoVue>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="queryFrom.page"
                   :page-sizes="[5,7,10,15]"
                   :page-size="queryFrom.size"
                   style="margin-top: 20px;"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>
10
<script>
import listVue from './component/list.vue';
import dialogInfoVue from '@/views/goods/manage/component/dialogInfo.vue';
export default {
  components: {
    listVue,
    dialogInfoVue
  },
  data () {
    return {
      customerBills: [],
      queryFrom: {
        page: 1,
        size: 7
      },
      total: 0,

    }
  },
  created () {
    this.queryCustomerBill();
  },
  methods: {
    queryCustomerBill () {
      this.axios.post('/query/customer_bill', this.queryFrom).then(res => {
        this.customerBills = res.data.data
        this.total = res.data.total
      })
    },
    handleSizeChange (size) {
      this.queryFrom.size = size;
      this.queryCustomerBill();
    },
    handleCurrentChange (page) {
      this.queryFrom.page = page;
      this.queryCustomerBill();
    }
  }

}
</script>

<style lang="less" scoped>
.search {
}
</style>